<template>
 <div>
    <a-modal
    title="添加房間"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    footer=''
  >
    <a-spin :spinning="confirmLoading">
      <a-steps :current="current" v-show="false">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content">
        <a-form :form="form">
          <div v-show="current === 0">
            <a-form-item>
              <a-input  v-show="false" v-decorator="['id']" />
            </a-form-item>
            <a-form-item v-if="category === '1'">
              <a-input  v-show="false" v-decorator="['estateid']" />
            </a-form-item>
            <a-form-item
              label="所屬房產"
              v-if="category === '1'"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input placeholder="" v-decorator="['realName']" :disabled="true"/>
            </a-form-item>
            <a-form-item
                        label="所屬房產"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        v-if="category === '2'"
                      >
                        <a-select style="width: 100%" placeholder="请选择所屬房產" v-decorator="['estateid', {rules: [{ required: true, message: '请选择所屬房產！' }]}]">
                          <a-select-option v-for="(item,index) in stateTypeData" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                        </a-select>
            </a-form-item>
            <a-form-item
                        label="房產類型"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-select style="width: 100%" placeholder="请选择房產類型" v-decorator="['houseType', {rules: [{ required: true, message: '请选择房產類型！' }]}]">
                          <a-select-option v-for="(item,index) in houseTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                        </a-select>
            </a-form-item>
            <a-form-item
              label="樓層號"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              v-if="category === '1'"
              has-feedback
            >
            <a-select style="width: 100%" placeholder="請選擇樓層號" v-decorator="['floorid', {rules: [{ required: true, message: '請選擇樓層號' }]}]">
                <a-select-option v-for="(item,index) in floorListData" :key="index"  :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="房间编号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入房间编号" :addon-before="roompre" :addon-after="roomsuf" v-decorator="['code', {rules: [{required: true, message: '请输入房间编号！'}]}]" />
            </a-form-item>
            <a-form-item
                label="戶型"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol" >
                <a-select style="width: 100%" placeholder="请选择戶型" v-decorator="['roomType', {rules: [{ required: true, message: '请选择房產類型！' }]}]">
                  <a-select-option :key="0" :value="0">無戶型</a-select-option>
                  <a-select-option v-for="(item,index) in roomTypeData" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item
              label="面積"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input placeholder="请输入面积（平米）" v-decorator="['area', { initialValue: '0.00', rules: [{required: true, message: '请输入面积（平米）！'}]}]" addon-after="平米"/>
            </a-form-item>
            <a-form-item
                      label="電梯樓梯配置"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      >
                          <a-radio-group placeholder="電梯樓梯配置" v-decorator="['elevator',{ initialValue: 1,rules: [{ required: true, message: '電梯樓梯配置！' }]}]">
                            <a-radio  key="0" :value="1">電梯</a-radio>
                            <a-radio  key="1" :value="2">樓梯</a-radio>
                          </a-radio-group>
            </a-form-item>
            <a-divider style="margin:6px 0px"/>
            <a-divider type="vertical" class="divider-only"/>報價
            <a-row :gutter="24">
              <a-form-item
              label="收租周期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input-group compact>
                <a-form-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol">
                  <a-select style="width: 150px" v-decorator="['receiptfu', { initialValue: 1, rules: [{ required: true, message: '请选择付款方式！' }]}]">
                    <a-select-option v-for="(item,index) in 18" :key="index" :value="item">付{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol">
                  <a-select style="width: 150px" v-decorator="['receiptya', { initialValue: 1, rules: [{ required: true, message: '请选择押金方式！' }]}]" @change="onReceiptyaChange">
                    <a-select-option v-for="(item,index) in 18" :key="index" :value="item">押{{ item }}</a-select-option>
                    <a-select-option :value="19">押金自定義</a-select-option>
                  </a-select>
                </a-form-item>
                 <a-form-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol">
                  <a-select style="width: 150px" v-decorator="['receiptyj', { initialValue: 2, rules: [{ required: true, message: '请选择付款周期！' }]}]">
                    <a-select-option :value="1">日</a-select-option>
                    <a-select-option :value="2">月</a-select-option>
                    <a-select-option :value="3">年</a-select-option>
                  </a-select>
                </a-form-item>
              </a-input-group>
            </a-form-item>
            </a-row>
            <a-form-item
              label="租金"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input-number
              style="width:100%"
              placeholder="請輸入租金"
              :precision="2"
              :min="0"
              :max="99999999"
              :step="10"
              v-decorator="['rent', { initialValue: 0, rules: [{required: true, message: '請輸入租金'}]}]"
              @change="onRentChange"/>
            </a-form-item>
            <a-form-item
              label="每月押金"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input-number
              style="width:100%"
              placeholder="請輸入每月租金"
              :precision="2"
              :min="0"
              :max="99999999"
              :step="10"
              v-decorator="['deposit', { initialValue: 0, rules: [{required: true, message: '請輸入每月押金'}]}]"/>
            </a-form-item>
          </div>
          <div v-show="current === 1">
            <a-divider style="margin:6px 0px"/>
            <a-divider type="vertical" class="divider-only"/>其他押金
            <a-row :gutter="24">
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="其他押金"
                  :labelCol="labelCol_JG"
                  :wrapperCol="wrapperCol_JG">
                  <a-table
                              size="middle"
                              :columns="columnsYj"
                              :dataSource="yjData"
                              :pagination="false"
                              :loading="memberLoading"
                            >
                            <template slot="amount" slot-scope="text, record">
                              <a-input-number
                                  style="width:100%"
                                  :precision="2"
                                  :min="0"
                                  :value="text"
                                  :max="99999999"
                                  @change="e => handleChange(e,record.key, 'amount')"
                                  :step="10"/>
                            </template>
                            <template slot="quantity" slot-scope="text, record">
                              <a-input-number
                                  :disabled="record.deposittype === '0'"
                                  style="width:100%"
                                  :min="0"
                                  :value="text"
                                  :max="99999999"
                                  @change="e => handleChange(e,record.key,'quantity')"
                                  :step="1"/>
                            </template>
                            <template slot="operation" slot-scope="text, record">
                              <a @click="remove(record.key)">删除</a>
                            </template>
                    </a-table>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row  type="flex" justify="space-around" align="middle">
                <a-col :span="4">
                  <a-button type="primary" size="small" @click="addYj()" >添加押金</a-button>
                </a-col>
            </a-row>
            <a-divider/>
            <a-divider type="vertical" class="divider-only"/>水電物業
            <a-row :gutter="24">
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="水電物業"
                  :labelCol="labelCol_JG"
                  :wrapperCol="wrapperCol_JG">
                  <a-table
                              size="middle"
                              :columns="columnsFy"
                              :dataSource="fyData"
                              :pagination="false"
                              :loading="memberLoading"
                            >
                            <template slot="amount" slot-scope="text, record">
                                <a-input-number
                                    style="width:100%"
                                    :disabled="record.type === '3' || record.type === 3"
                                    :precision="2"
                                    :min="0"
                                    :value="text"
                                    :max="99999999"
                                    @change="e => handleFyChange(e,record.key, 'amount')"
                                    :step="10"/>
                              </template>
                              <template slot="solder" slot-scope="text, record">
                                <a-input-number
                                    v-show="record.type === '2' || record.type === 2"
                                    style="width:100%"
                                    :precision="2"
                                    :min="0"
                                    :value="text"
                                    :max="99999999"
                                    @change="e => handleFyChange(e,record.key, 'solder')"
                                    :step="10"/>
                              </template>
                              <template slot="magnification" slot-scope="text, record">
                                <a-input-number
                                    v-show="record.type === '2' || record.type === 2"
                                    style="width:100%"
                                    :precision="2"
                                    :min="0"
                                    :value="text"
                                    :max="99999999"
                                    @change="e => handleFyChange(e,record.key, 'magnification')"
                                    :step="10"/>
                              </template>
                              <template slot="patchlossrate" slot-scope="text, record">
                                <a-input-number
                                    v-show="record.type === '2' || record.type === 2"
                                    style="width:100%"
                                    :precision="2"
                                    :min="0"
                                    :value="text"
                                    :max="99999999"
                                    @change="e => handleFyChange(e,record.key, 'patchlossrate')"
                                    :step="10"/>
                              </template>
                              <template slot="initialreading" slot-scope="text, record">
                                <a-input-number
                                    v-show="record.type === '2' || record.type === 2"
                                    style="width:100%"
                                    :precision="2"
                                    :min="0"
                                    :value="text"
                                    :max="99999999"
                                    @change="e => handleFyChange(e,record.key, 'initialreading')"
                                    :step="10"/>
                              </template>
                            <template slot="ydzd" slot-scope="text, record">
                              <span v-if="record.type !== '2'">
                                <a-checkbox :default-checked="record.ydzd === 1" :disabled="!hydropowerChangeflg" @change="e => handleFyChange(e,record.key,'ydzd')">
                                  移到租金賬單
                                </a-checkbox>
                              </span>
                              <!-- <a-radio :disabled="record.type === 1" :checked="record.type === 1"  @change="e => handleChange(e,record.key,'ydzd')"></a-radio> -->
                            </template>
                            <template slot="operation" slot-scope="text, record">
                              <a @click="removeFy(record.key)">删除</a>
                            </template>
                    </a-table>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row  type="flex" justify="space-around" align="middle">
                <a-col :span="4">
                  <a-button type="primary" size="small" @click="addFy()" >添加費用</a-button>
                </a-col>
            </a-row>
            <a-form-item
              label="租金水電分開收取"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              >
                  <a-radio-group placeholder="请选择租金水電分開收取" button-style="solid" onch v-decorator="['hydropower',{ initialValue: 0, rules: [{ required: true, message: '请选择租金水電分開收取！' }]}]" @change="onHydropowerChange">
                    <a-radio-button  :key="0" :value="0">關閉</a-radio-button>
                    <a-radio-button  :key="1" :value="1">開啓</a-radio-button>
                  </a-radio-group>
            </a-form-item>
            <div class="fy-item" v-if="hydropowerChangeflg">
              <a-form-item
                label="水電周期"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-select  style="width: 100%" placeholder="请选择水電周期" v-decorator="['hydropowercycle', { initialValue: 1 }]">
                      <a-select-option v-for="(item,index) in 18" :key="index" :value="item">{{ item }}月</a-select-option>
                  </a-select>
                </a-form-item>
              <a-form-item
                label="賬單起始日"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-select style="width: 100%" placeholder="请选择賬單起始日" v-decorator="['billstart', { initialValue: 0 }]">
                      <a-select-option :key="0" :value="0">起租日</a-select-option>
                      <a-select-option v-for="(item,index) in 31" :key="index" :value="item">{{ item }}号</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="收租日"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-radio-group placeholder="请选择收租日" @change="onBillEndTypeChange" v-decorator="['billEndType', { initialValue: 0 }]">
                    <a-radio :style="radioStyle" :key="0" :value="0">提前</a-radio>
                    <div>
                      <a-form-item label="">
                        <a-input-number
                        :min="1"
                        :max="365"
                        :disabled="billEndTqDataable"
                        style="width:100%"
                        placeholder="请输入账单收租日提前几日"
                        v-decorator="['billEndTqData', { initialValue: 15 }]"/>
                        相较账单起始日提前几天
                      </a-form-item>
                    </div>
                    <a-radio :style="radioStyle" :key="1" :value="1">固定</a-radio>
                    <div  style="width: 100%">
                      <a-form-item  label="">
                        <a-select :disabled="billEndGdmonthDataDataable"  placeholder="请选择账单收租日固定几月" style="width: 100%" v-decorator="['billEndGdmonthData', { initialValue: 0 }]">
                          <a-select-option  style="width: 100%"  v-for="(item,index) in billEndGdmonthDataData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                        </a-select>
                      </a-form-item>
                      <a-form-item >
                        <a-select :disabled="billEndGdmonthDataDataable"   placeholder="请选择账单收租日固定几日" style="width: 100%" v-decorator="['billEndGddayData', { initialValue: 5 }]">
                          <a-select-option  style="width: 100%"  v-for="(item,index) in billEndGddayDataData" :key="index" :value="item">{{ item }}號</a-select-option>
                        </a-select>
                      </a-form-item>
                    </div>
                  </a-radio-group>
                </a-form-item>
            </div>
            <a-divider style="margin:6px 0px"/>
            <a-divider type="vertical" class="divider-only"/>家私配置
            <a-row :gutter="24">
              <a-col :md="24" :sm="24">
                <a-form-item
                  label="家私配置"
                  :labelCol="labelCol_JG"
                  :wrapperCol="wrapperCol_JG">
                  <a-table
                              size="middle"
                              :columns="columnsJs"
                              :dataSource="jsData"
                              :pagination="false"
                              :loading="memberLoading"
                            >
                            <template slot="price" slot-scope="text, record">
                                  <a-input-number
                                    :min="0"
                                    :max="9999999"
                                    :value="text"
                                    :precision='2'
                                    :step="1"
                                    @change="e => handleChangeJs(e,record.key,'price')" />
                            </template>
                            <template slot="operation" slot-scope="text, record">
                              <a @click="removeJs(record.key)">删除</a>
                            </template>
                    </a-table>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row  type="flex" justify="space-around" align="middle">
                <a-col :span="4">
                  <a-button type="primary" size="small" @click="addJs()" >添加家私</a-button>
                </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
      <div class="steps-action">
            <a-row type="flex" justify="center" align="top">
                <a-col :span="24">
                    <a-button v-if="current === 0" class="stem-class" type="primary" @click="next">
                      下一步
                    </a-button>
                    <a-button v-if="current === 0" class="stem-class" @click="handleCancel">
                      取消
                    </a-button>
                    <a-button
                      v-if="current === 1"
                      type="primary"
                      class="stem-class"
                      @click="handleSubmit">
                      保存
                    </a-button>
                     <a-button v-if="current === 1" class="stem-class" style="margin-left: 8px" @click="prev">
                      上一步
                    </a-button>
                     <a-button v-if="current === 1" class="stem-class" @click="handleCancel">
                      取消
                    </a-button>
                </a-col>
            </a-row>
        </div>
    </a-spin>
  </a-modal>
  <add-yj-form ref="addYjForm" @ok="yjhandleOk" />
  <add-furniture-form ref="addFurnitureForm" @ok="jshandleOk" />
  <add-expenses-form ref="addExpensesForm" @ok="fyhandleOk" />
 </div>
</template>

<script>
  import { getFssList, getHxList } from '@/api/modular/main/busrealestate/busRealEstateManage'
  import { busRoomAdd } from '@/api/modular/main/busroom/busRoomManage'
  import { busRealEstateFloorListForHave } from '@/api/modular/main/busrealestatefloor/busRealEstateFloorManage'
  import { busBasicSettingsOne } from '@/api/modular/main/busbasicsettings/busBasicSettingsManage'
  import addYjForm from './addYjForm.vue'
  import addFurnitureForm from './addFurnitureForm.vue'
  import addExpensesForm from './addExpensesForm.vue'
  export default {
     components: {
      addYjForm,
      addFurnitureForm,
      addExpensesForm
    },
    data () {
      return {
        current: 0,
        steps: [
          {
            title: '房閒設置',
            content: 1
          },
          {
            title: '其他設置',
            content: 2
          }
        ],
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px'
        },
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 4 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 20 }
          }
        },
        formItemLayoutWithOutLabel: {
          wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 20, offset: 4 }
          }
        },
        memberLoading: false,
         // 机构行样式
        labelCol_JG: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol_JG: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        houseTypeData: [],
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        floorListData: [],
        roomTypeData: [],
        // 分散式房產列表
        stateTypeData: [],
        estateid: '',
        category: '',
        roompre: '',
        roomsuf: '',
        columnsYj: [
          {
            title: '押金名稱',
            dataIndex: 'depositname',
            width: '30%',
            scopedSlots: { customRender: 'depositname' }
          },
          {
            title: '金額',
            dataIndex: 'amount',
            width: '30%',
            scopedSlots: { customRender: 'amount' }
          },
          {
            title: '數量',
            dataIndex: 'quantity',
            width: '30%',
            scopedSlots: { customRender: 'quantity' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        columnsJs: [
          {
            title: '家私名稱',
            dataIndex: 'name',
            width: '35%',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '數量',
            dataIndex: 'quantity',
            width: '15%',
            scopedSlots: { customRender: 'quantity' }
          },
          {
            title: '金額',
            dataIndex: 'price',
            width: '40%',
            scopedSlots: { customRender: 'price' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        columnsFy: [
          {
            title: '費用項',
            dataIndex: 'name',
            width: '15%',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '價格',
            dataIndex: 'amount',
            width: '10%',
            scopedSlots: { customRender: 'amount' }
          },
          {
            title: '保底用量',
            dataIndex: 'solder',
            width: '10%',
            scopedSlots: { customRender: 'solder' }
          },
          {
            title: '倍率',
            dataIndex: 'magnification',
            width: '10%',
            scopedSlots: { customRender: 'magnification' }
          },
          {
            title: '表損率%',
            dataIndex: 'patchlossrate',
            width: '10%',
            scopedSlots: { customRender: 'patchlossrate' }
          },
          {
            title: '初始讀數',
            dataIndex: 'initialreading',
            width: '10%',
            scopedSlots: { customRender: 'initialreading' }
          },
          {
            title: '移到租金賬單',
            dataIndex: 'ydzd',
            width: '15%',
            scopedSlots: { customRender: 'ydzd' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        // 已保存的押金
        yjData: [],
        // 已保存的费用
        fyData: [],
        // 已保存的家私配置
        jsData: [],
        // 水電物業租金水电分开收取標志
        hydropowerChangeflg: false,
        billEndGdmonthDataDataable: false,
        billEndTqDataable: false,
        billEndGdmonthDataData: [ { 'code': 12, 'name': '提前12月' }, { 'code': 11, 'name': '提前11月' }, { 'code': 10, 'name': '提前10月' }, { 'code': 9, 'name': '提前9月' }, { 'code': 8, 'name': '提前8月' }, { 'code': 7, 'name': '提前7月' }, { 'code': 6, 'name': '提前6月' }, { 'code': 5, 'name': '提前5月' }, { 'code': 4, 'name': '提前4月' }, { 'code': 3, 'name': '提前3月' }, { 'code': 2, 'name': '提前2月' }, { 'code': 1, 'name': '提前1月' }, { 'code': 0, 'name': '当月' }, { 'code': -1, 'name': '延後1月' }, { 'code': -2, 'name': '延後2月' }, { 'code': -3, 'name': '延後3月' }, { 'code': -4, 'name': '延後4月' }, { 'code': -5, 'name': '延後5月' }, { 'code': -6, 'name': '延後6月' }, { 'code': -7, 'name': '延後7月' }, { 'code': -8, 'name': '延後8月' }, { 'code': -9, 'name': '延後9月' }, { 'code': -10, 'name': '延後10月' }, { 'code': -11, 'name': '延後11月' }, { 'code': -12, 'name': '延後12月' } ],
        billEndGddayDataData: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]
      }
    },
    methods: {
       onBillEndTypeChange (e) {
        if (e.target.value === 0) {
          this.billEndTqDataable = false
          this.billEndGdmonthDataDataable = true
        } else {
          this.billEndTqDataable = true
          this.billEndGdmonthDataDataable = false
        }
      },
      // 初始化方法
      add (id, name, houseType, category, roompre, roomsuf) {
        setTimeout(() => {
          this.form.setFieldsValue({
            id: '',
            estateid: id,
            realName: name,
            houseType: houseType
          })
        }, 100)
        this.roompre = roompre
        this.roomsuf = roomsuf
        this.estateid = id
        this.visible = true
        this.category = category
        this.getDataListRoom()
        this.getHxLists()
        if (this.category === '2') {
          this.getStateLists()
        }
        const bedroomsOption = this.$options
        this.houseTypeData = bedroomsOption.filters['dictData']('house_type')
      },
      next() {
        var validateFieldsList = ['estateid', 'houseType', 'code', 'roomType', 'area', 'elevator', 'elevator', 'receiptfu', 'receiptya', 'receiptyj', 'rent', 'deposit']
        if (this.category === '1') {
          validateFieldsList.push('floorid')
        }
        this.form.validateFields(validateFieldsList, (errors, values) => {
          if (!errors) {
            this.current = 1
          }
        })
      },
      prev() {
        this.current = 0
      },
      getStateLists() {
        getFssList().then((res) => {
          if (res.code === 200) {
            this.stateTypeData = res.data
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      getHxLists() {
        getHxList().then((res) => {
          if (res.code === 200) {
            this.roomTypeData = res.data
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
        busBasicSettingsOne().then((res) => {
          if (res.code === 200) {
            if (res.data) {
              this.onBillEndChange(res.data.billEndType)
              if (res.data.billStartType === 0) {
                this.form.getFieldDecorator('billstart', { initialValue: 0 })
              } else {
                this.form.getFieldDecorator('billstart', { initialValue: res.data.billStartData })
              }
              this.form.getFieldDecorator('billEndType', { initialValue: res.data.billEndType })
              if (res.data.billEndType === 0) {
                this.form.getFieldDecorator('billEndTqData', { initialValue: res.data.billEndTqData })
              } else {
                this.form.getFieldDecorator('billEndGdmonthData', { initialValue: res.data.billEndGdmonthData })
                this.form.getFieldDecorator('billEndGddayData', { initialValue: res.data.billEndGddayData })
              }
            }
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      onBillEndChange (e) {
        if (e === 0) {
          this.billEndTqDataable = false
          this.billEndGdmonthDataDataable = true
        } else {
          this.billEndTqDataable = true
          this.billEndGdmonthDataDataable = false
        }
      },
      getDataListRoom() {
        busRealEstateFloorListForHave(this.estateid).then((res) => {
          if (res.code === 200) {
            this.floorListData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      // 租金点击事件
      onRentChange(value) {
        const receiptya = this.form.getFieldValue('receiptya')
        if (receiptya === 19) {
          this.$nextTick(() => {
            this.form.setFieldsValue({
              deposit: value
            })
          })
        } else {
          this.$nextTick(() => {
            this.form.setFieldsValue({
              deposit: value * receiptya
            })
          })
        }
      },
      // 押金点击事件
      onReceiptyaChange(value) {
        if (value !== 19) {
         const rent = this.form.getFieldValue('rent')
         const rentPrice = value * rent
          this.$nextTick(() => {
            this.form.setFieldsValue({
              deposit: rentPrice
            })
          })
        }
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.yjData = this.yjData
            values.fyData = this.fyData
            values.jsData = this.jsData
            busRoomAdd(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.msg)// + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.yjData = []
        this.jsData = []
        this.fyData = []
        this.stateTypeData = []
        this.estateid = ''
        this.current = 0
        this.visible = false
        this.hydropowerChangeflg = false
        this.billEndGdmonthDataDataable = false
        this.billEndTqDataable = false
      },
      /**
       * 删除
       */
      remove (key) {
        const newData = this.yjData.filter(item => item.key !== key)
        this.yjData = newData
      },
      /**
       * 选择子表单单项触发
       */
      handleChange (value, key, column) {
        const newData = [...this.yjData]
        const target = newData.find(item => key === item.key)
        if (target) {
          target[column] = value
          this.yjData = newData
        }
      },
      handleFloorOk () {},
      // 添加押金
      addYj() {
          this.$refs.addYjForm.add(this.yjData)
      },
      yjhandleOk (param) {
        const selectedRowKeysYjlen = param.length
        if (selectedRowKeysYjlen > 0) {
           for (var i = 0; i < selectedRowKeysYjlen; i++) {
              var quantityNum = 0
              if (param[i].deposittype === '1') {
                quantityNum = 1
              }
              this.yjData.push({ key: param[i].key, disabled: true, depositname: param[i].depositname, depositid: param[i].depositid, deposittype: param[i].deposittype, amount: 0.00, quantity: quantityNum })
           }
        }
      },
      /**
       * 删除
       */
      removeJs (key) {
        const newData = this.jsData.filter(item => item.key !== key)
        this.jsData = newData
      },
      /**
       * 选择子表单单项触发
       */
      handleChangeJs (value, key, column) {
        const newData = [...this.jsData]
        const target = newData.find(item => key === item.key)
        if (target) {
          target[column] = value
          this.jsData = newData
        }
      },
      addJs() {
        this.$refs.addFurnitureForm.add(this.jsData)
      },
      jshandleOk(param) {
        const selectedRowKeysYjlen = param.length
        if (selectedRowKeysYjlen > 0) {
           for (var i = 0; i < selectedRowKeysYjlen; i++) {
              this.jsData.push({ key: this.jsData.length + 1, furnitureid: param[i].furnitureid, disabled: true, name: param[i].name, price: 0.00, quantity: 1 })
           }
        }
      },
      onHydropowerChange(e) {
        console.log('radio checked', e.target.value)
        if (e.target.value === 0) {
          this.hydropowerChangeflg = false
        } else {
          this.hydropowerChangeflg = true
        }
        this.chengeYdzdType(e.target.value)
      },
      chengeYdzdType(value) {
      },
      // 费用表
      addFy() {
        this.$refs.addExpensesForm.add(this.fyData)
      },
      handleFyChange (value, key, column) {
        if (column === 'ydzd') {
          var ydzd = 1
          if (!value.target.checked) {
            ydzd = 0
          }
          const newData = [...this.fyData]
          const target = newData.find(item => key === item.key)
          if (target) {
            target[column] = ydzd
            this.fyData = newData
          }
        } else {
          const newData = [...this.fyData]
          const target = newData.find(item => key === item.key)
          if (target) {
            target[column] = value
            this.fyData = newData
          }
        }
      },
      removeFy(key) {
        const newData = this.fyData.filter(item => item.key !== key)
        this.fyData = newData
      },
      // 费用确认回调
      fyhandleOk(param) {
        const selectedRowKeysYjlen = param.length
        if (selectedRowKeysYjlen > 0) {
           for (var i = 0; i < selectedRowKeysYjlen; i++) {
              this.fyData.push({ key: param[i].key, name: param[i].name, costid: param[i].costid, type: param[i].type, amount: 0.00, solder: 0, magnification: 1, patchlossrate: 0.00, initialreading: 0, ydzd: 1 })
           }
        }
      }
    }
  }
</script>
<style scoped>
.fy-item{
  min-height: 60px;
}
.stem-class{
    float: right;
}
</style>
